<template>
    <div v-if="isShow" class="tip">
        <el-icon><InfoFilled /></el-icon>
        <span>{{ tip }}</span>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = withDefaults(
    defineProps<{
        isShow: boolean;
    }>(),
    {
        isShow: false
    }
);

const tip = ref(
    '因外部链接（域名非keyid.cn的链接）的限制问题，链接地址为外部链接时不支持统计浏览器时长、客户分享相关数据。'
);
</script>

<style lang="scss" scoped>
.tip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px;
    background-color: #fef0e5;
    border-radius: 4px;
    margin-bottom: 16px;

    .el-icon {
        font-size: 20px;
        color: #f96b02;
    }

    span {
        color: #f96b02;
    }
}
</style>
